import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 15:45:02
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2022-12-29 13:45:34
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\components\FinishChart.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { cloneDeep } from 'lodash';
import { useEffect, useState } from 'react';
import styles from './finishChart.module.less';
const initData = [
    { processesType: 10, completedAmount: 0, title: '上架' },
    { processesType: 20, completedAmount: 0, title: '大烫' },
    { processesType: 30, completedAmount: 0, title: '复查' },
    { processesType: 40, completedAmount: 0, title: '包装' }
];
export default (props) => {
    const { data = [] } = props;
    const [currentData, setCurrentData] = useState([...initData]);
    const getPositionNumber = (num) => {
        const bit = parseInt(`${num % 10}`);
        const ten = parseInt(`${(num % 100) / 10}`); //十位
        const best = parseInt(`${(num % 1000) / 100}`); //百位
        const thousand = parseInt(`${(num % 10000) / 1000}`); //千位
        const wan = parseInt(`${(num % 100000) / 10000}`); //千位
        return (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: wan > 0 ? '#04e4f9' : '#072C88' }, children: wan }), _jsx("span", { style: { color: thousand <= 0 && wan <= 0 ? '#072C88' : '#04e4f9' }, children: thousand }), _jsx("span", { style: {
                        color: thousand <= 0 && wan <= 0 && best <= 0 ? '#072C88' : '#04e4f9'
                    }, children: best }), _jsx("span", { style: {
                        color: thousand <= 0 && wan <= 0 && best <= 0 && ten <= 0
                            ? '#072C88'
                            : '#04e4f9'
                    }, children: ten }), _jsx("span", { style: {
                        color: '#04e4f9'
                    }, children: bit })] }));
    };
    useEffect(() => {
        if (data && data.length) {
            const newData = cloneDeep(currentData);
            newData.map((i) => {
                const current = data.find((d) => d.processesType === i.processesType) || {};
                i.completedAmount = current.completedAmount || 0;
            });
            setCurrentData([...newData]);
        }
    }, [data]);
    return (_jsx("div", { className: styles.container, children: currentData.map((d) => (_jsxs("div", { className: styles.numberBox, children: [_jsxs("div", { className: styles.finishTitle, children: [d.title, "\u5B8C\u6210\u6570\u91CF"] }), getPositionNumber(d.completedAmount)] }, d.processesType))) }));
};
